<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>{$system_name}</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileColor" content="#0e90d2">
    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
  <link rel="canonical" href="http://www.example.com/">
  -->
    <link rel="stylesheet" href="__PUBLIC__/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/app.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/index.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/jquery-labelauty.css">
    <!--必要样式-->
    <style>
        .ovfHiden {
            overflow: hidden;
            height: 100%;
        }

        ul {
            list-style-type: none;
        }

        li {
            display: inline-block;
        }

        li {
            margin: 5px 0 0;
        }

        ol, ul {
            padding-left: 0.5rem;
        }

        input.labelauty + label {
            font: 12px "Microsoft Yahei";
        }

        input.labelauty + label {
            padding: 5px 10px;
            margin-right: 10px;
        }

        .header-content {
            float: left;
            width: 250px;
            height: auto;
            margin-left: 10px;
        }

        .search {
            height: 30px;
            border: 1px solid #d4d4d4;
            border-radius: 5px;
            margin: 10px auto;
            width: 100%;
            padding-left: 40px;

            font-size: 12px;
            background-image: url('__PUBLIC__/assets/i/search.png');
            background-repeat: no-repeat;
            background-size: 16px;
            background-position: 18px 6px;
            color: #999;
        }

        .header-right {
            width: 65px;
            float: left;
            padding: 8px 10px 9px 10px;
        }

        .search-btn {
            color: #F6DB7F;
            display: inline-block;
            border: 2px solid #F6DB7F;
            border-radius: 10px;
            width: 45px;
            text-align: center;
            height: 32px;
            line-height: 28px;
            font-size: 15px;
        }

        .am-slider-a1 .am-control-nav li a.am-active {
            background: #FFF;
        }

        .ring {
            width: 100%;
            height: auto;
            color: #FFF;
            font-size: 12px;
        }

        .ring-list {
            width: 100%;
            /*height: 190px;*/
            padding: 5px 0;
            position: relative;
            margin-bottom: 5px;
        }

        .ring-1v1 {
            background: url("__PUBLIC__/images/ring_bg1.png");
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
        }

        .ring-3v3 {
            background: url("__PUBLIC__/images/ring_bg2.png");
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
        }

        .ring-5v5 {
            background: url("__PUBLIC__/images/ring_bg3.png");
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
        }

        .oath {
            display: inline-block;
            width: 100%;
            color: #FFF;
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            white-space: nowrap;
        }

        .username {
            display: inline-block;
            width: 100%;
            color: #FFF;
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
            vertical-align: bottom;
        }

        .ring-list-detail span {
            display: block;
        }

        a, a:hover, a:focus, a:visited {
            color: #FFF;
        }

        .select-box {
            background: #FFF;
            width: 100%;
            height: auto;
            position: absolute;
            top: 49px;
            z-index: 9999;
            display: none;
            overflow:scroll;
        }

        .select-header {
            line-height: 27px;
            padding: 0 10px;
            border-bottom: 1px solid #ECECEC;
        }

        .select-header span {
            font-size: 14px;
            color: #666;
            vertical-align: middle;
        }

        .select-header img {
            float: right;
            -ms-transform: rotate(90deg); /* IE 9 */
            -moz-transform: rotate(90deg); /* Firefox */
            -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
            -o-transform: rotate(90deg); /* Opera */
            transform: rotate(90deg);
            margin-right: 10px;
            margin-top: 7px;
        }

        .select-item {
            padding: 5px 15px 0;
            color: #333;
            font-size: 12px;
        }

        .select-footer {
            text-align: center;
            margin: 30px 0;
        }

        .confirm-btn {
            color: #F6DB7F;
            background: #333;
            font-size: 16px;
            border-radius: 3px;
            width: 108px;
            text-align: center;
            line-height: 31px;
            display: inline-block;
        }
        ::-webkit-scrollbar{width:0px}
    </style>
</head>

<body>
<input type="hidden" id="room_pagenum_hidden" value="1">
<header data-am-widget="header" class="am-header am-header-default">
    <div class="am-header-left am-header-nav">
        <a href="__APP__/Home/Me" class="">
            <img src="__PUBLIC__/assets/i/left.png" alt="" style="margin: 5px">
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">
            我的擂台
        </a>
    </h1>
</header>

<div class="ring" id="room_list">

</div>

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="__PUBLIC__/assets/js/jquery.min.js"></script>
<script src="__PUBLIC__/assets/js/angular.min.js"></script>
<script src="__PUBLIC__/assets/js/amazeui.min.js"></script>
<script src="__PUBLIC__/layer/layer.js"></script>
<script type="text/javascript">
    function check(input){
        if(input == undefined){
            return '';
        }
        return input;
    }

    var page=1; //当前页的页码
    var allpage =1; //总页码，会从后台获取
    $(function () {
        getRoomListByPage(1);
    });


    function scrollFn(){
        allpage = $('#totalpage').val();
        //真实内容的高度
        var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
        //视窗的高度
        var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
        //隐藏的高度
        var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        if(pageHeight - viewportHeight - scrollHeight < 20){  //如果满足触发条件，执行
            if(page <= allpage) {
                getRoomList();
            }
        }
    }
    $(window).bind("scroll",scrollFn);  //绑定滚动事件
    function getRoomListByPage(pagenum) {
        //提交form
        $('#room_pagenum_hidden').val(pagenum);
        getRoomList();
    }

    function getRoomList() {
        $.ajax({
            type: "POST",
            url: "__URL__/ajaxRoomList",
            async: false,
            data: {
                pagenum: page
            },
//            dataType: "json",
            success: function (data) {
                page++;  //页数加1
                $('#room_list').append(data);
            },
            error: function (data) {
                console.info(data);
            }
        });
    }
</script>
</body>
</html>

